{include file="public/header" /}
<style>
	.carousel-list{float:left;width:252px;overflow-y:auto;}
	.carousel-list > li{margin-bottom:10px;width:250px;height:120px;border:1px solid #ccc;border-radius:5px;position:relative;overflow:hidden;}
	.carousel-item{height:120px;}
	.carousel-btn{position:absolute;width:100%;height:40px;background:rgba(0,0,0,0.6);bottom:0;}
	.carousel-btn button{margin-top:6px;float:right;margin-right:5px;}
	.add-carousel,.img-box{text-align:center;line-height:120px;font-size:40px;color:#888; cursor:pointer;}
	.carousel-info{float:left;width:600px;height:700px;margin-left:30px;}
	.img-box{width:250px;border:1px solid #ccc;height:120px;}
	.img-box i{line-height:120px;}
	.carousel-img{height:120px}
</style>
</head>
<body>
<div id="box" v-cloak class="box">
	<!--轮播图列表  -->
	<ul class="carousel-list">
		<li v-for="(item,key) in list">
			<img :src="item.img" class="carousel-item">
			<div class="carousel-btn">
				<el-button icon="el-icon-edit" size="mini" type="primary" @click="edit(key)"></el-button>
				<el-button icon="el-icon-delete" size="mini" type="danger" @click="deletes(item.id)"></el-button>
			</div>
		</li>
		<li class="add-carousel" @click="add()">
			<i class="el-icon-plus"></i>
		</li>
	</ul>
	<!--轮播图信息  -->
	<div class="carousel-info">
		<el-form label-position="top" size="small">
			<el-form-item label="图片">
				<label for="carousel">
					<img :src="form.img" class="carousel-img" v-if="form.img">
					<div class="img-box" v-else>
						<i class="el-icon-upload"></i>
					</div>
				</label>
				<input type="file" id="carousel" style="display:none;" @change="upimg()">
			</el-form-item>
			<el-form-item label="链接">
				<el-input placeholder="请输入轮播图链接" v-model="form.url"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="submit()">立即提交</el-button>
			</el-form-item>
		</el-form>
	</div>
</div>
<script>
new Vue({
	el : '#box',
	data:{
		list : {$list | raw},
		form : {
			img:'',
			url : ''
		},
	},
	mounted:function(){
	},
	methods:{
		//删除轮播图
		deletes:function(id){
			var that = this;
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
	          	cancelButtonText: '取消',
	          	type: 'warning'
	        }).then(() => {
	          	$.post("{:url('delete')}",{id:id},function(res){
	          		if(res.code) {
						toastSuccess(that,res.msg,function(){
							location.reload();
						});
					}else{
						toastError(that,res.msg);
					}
	          	});
	        }).catch(() => {
	        });
		},
		//执行添加
		submit:function(){
			var that = this;
			$.post("{:url('Carousel/index')}",this.form,function(res){
				if(res.code) {
					toastSuccess(that,res.msg,function(){
						location.reload();
					});
				}else{
					toastError(that,res.msg);
				}
			});
		},
		//选取添加按钮
		add:function(){
			this.form = {img:'',url : ''};
		},
		//选取编辑按钮
		edit:function(key){
			this.form = this.list[key];
		},
		//上传图片
		upimg:function(){
			var that   = this;
			var file = event.currentTarget.files[0];
			var reader = new FileReader();
			reader.readAsDataURL(file);//调用自带方法进行转换
            reader.onload = function(e) {
            	var img=this.result;
            	that.form.img = img;
            }
		},
	}
});
</script>
</body>
</html>